// imageSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

// 类型
interface ImageState {
  selectedImageSrc: string | null;
  showEditingButtons: boolean;
  selectedImage: string | null;
  croppedImageSrc: string | null;
  backgroundRemovedImageSrc: string | null;
}

// 创建一个初始值
const initialState: ImageState = {
  selectedImageSrc: null,
  showEditingButtons: false,
  selectedImage: null,
  croppedImageSrc: null,
  backgroundRemovedImageSrc: null,
};

// 创建一个reducers
const imageSlice = createSlice({
  name: 'image', //名字
  initialState, //初始值
  reducers: {
    selectImage: (state, action: PayloadAction<string>) => {
      state.selectedImageSrc = action.payload;
      state.showEditingButtons = true;
    },
    clearSelectedImage: (state) => {
      state.selectedImageSrc = null;
      state.showEditingButtons = false;
      state.selectedImage = null;
    },
    setBackgroundRemovedImage: (state, action: PayloadAction<string>) => {
      state.backgroundRemovedImageSrc = action.payload;
    },
    updateImage(state, action: PayloadAction<string>) {
      state.selectedImage = action.payload;
    },
    cropImage: (state, action: PayloadAction<string>) => {
      state.selectedImageSrc = action.payload;
    }
  },
});

export const { selectImage, clearSelectedImage, updateImage, cropImage, setBackgroundRemovedImage } = imageSlice.actions;

export default imageSlice.reducer;